<template>
  <div class="login-container">
    <div class="main">
      <h1 class="title">宿舍管理系统</h1>
      <el-form
        :model="form"
        class="form"
        label-width="auto"
        style="max-width: 400px"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item prop="adminId">
          <el-input
            v-model="form.adminId"
            placeholder="请输入学工号"
            class="custom"
            size="large"
          >
            <template #prefix>
              <Icon type="account"></Icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="loginPwd">
          <el-input
            v-model="form.loginPwd"
            placeholder="请输入密码"
            type="password"
            show-password
            size="large"
          >
            <template #prefix>
              <Icon type="password"></Icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import {useUserStore} from "@/store/useUserStore.js"
import Icon from "@/components/Icon/index.vue";
const {Login} = useUserStore()
const form = ref({
  adminId: "",
  loginPwd: "",
});
const ruleFormRef = ref(); // 获取formDom
// 表单验证
const rules = reactive({
  adminId: [{ required: true, message: "请输入学工号", trigger: "blur" }],
  loginPwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      min: 6,
      max: 10,
      message: "密码长度6-10",
      trigger: "blur",
    },
  ],
});
const submitForm = async (Eln) => {
  if (!Eln) return;
  await Eln.validate(async (valid, fields) => {
    if (valid) {
      await Login(form.value)
    } else {
      ElMessage.error("请输入学工号和密码");
    }
  });
};

</script>

<style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";
.login-container {
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  background-color: @second;
  position: relative;
  .main {
    color: #fff;
    .self-center();
    width: 600px;
    text-align: center;
    .form {
      margin: 50px auto;
    }
    ::v-deep .el-input__wrapper {
      background-color: #283443;
      border: 2px solid #394453;
      box-shadow: none;
    }
    ::v-deep .is-focus {
      box-shadow: none;
      border: 2px solid #394453;
    }
    ::v-deep .el-input__inner {
      color: #fff;
    }
    .btn {
      width: 100%;
    }
  }
}
</style>